<!--  -->
<template>
<div class='login-page'>
    <div class="flex">
        <el-carousel height="420px">
        <el-carousel-item >
            <img src="../../assets/sw.jpg" alt="">
        </el-carousel-item>
        </el-carousel>
    <!-- CAPTCHA -->
        <div>
            <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="captcha" class="form-flex">
                    <el-input v-model="ruleForm.captcha"></el-input>
                    <img src="http://localhost:3000/api/users/captcha" alt="" ref="imgCap" @click="changeCap">
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
  </div>
    
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { login } from '@/api/user'
import { setCookie } from '@/utils/auth';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
     ruleForm: {
          username: '',
          password: '',
          captcha:''
        },
        rules:{
            username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
          ],
          captcha: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
        }
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
submitForm(formName) {
    let that = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            login(that.ruleForm).then(res=>{
                console.log('res',res)
                setCookie(res.data.token)
                if(res.data.status==200){
                    that.$router.push({
                        path:'/admin'
                    })
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      changeCap(){
         this.$refs.imgCap.src = 'http://localhost:3000/api/users/captcha?t'+ new Date().getTime()
      }
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less">
.login-page{
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left:0;
    background: url('../../assets/bg.jpg');
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    .flex{
        display: flex;
        background: #fff;
        width: 1000px;
        align-items: center;
        .el-carousel {
            width:510px;
        }
        .form-flex{
            .el-form-item__content{
                margin-left:0;
                display: flex;
                align-items: center;
                img{
                    height:40px;
                }
            }

        }
    }
}
</style>